import React, {Component} from 'react';
import {StyleSheet, Text, View, Image, 
  TouchableOpacity,TextInput
} from 'react-native';
import Toast, {DURATION} from 'react-native-easy-toast'
import BackButton from '../../component/BackButton';
import MyButton from '../../component/MyButton';
import DeviceStorage from '../../common/DeviceStorage';
const dismissKeyboard = require('dismissKeyboard');
import {BASEURL} from '../../api/api'
export default class ChangePwd extends Component{
  static navigationOptions = ({ navigation }) =>{
    return{
      title:'修改密码',
      headerRight:(<View></View>),
      headerLeft:<BackButton navigation = {navigation}/>
    }
  };
  constructor(props){
    super(props);
    this.state = ({
      yuanPwd: '',
      oldPwd: '',
      newPwd: '',
      confPwd: '',
      userId: this.props.navigation.getParam('userId'),
      userInfo:{
        userId:'',
        password:'',
      }
    })
  }
  componentDidMount(){
    DeviceStorage.get('user').then((user)=>{
      if(user){
        let userInfo = JSON.parse(user);
        this.setState({
          //userId: userInfo.userId,
          userInfo: userInfo,
          yuanPwd: userInfo.password
        })
      } 
    })
  }
  _textChange(val,type){
    if (type == 1){
      this.setState({
        oldPwd: val,
      })
    } else if(type == 2){
      this.setState({
        newPwd: val,
      })
    } else if(type == 3){
      this.setState({
        confPwd: val,
      })
    }
  }
  _save(){
    dismissKeyboard();
    let {yuanPwd, oldPwd, newPwd, confPwd} = this.state;
    if(!oldPwd){
      this.refs.toast.show("请输入原密码");
      return;
    } else if(yuanPwd != oldPwd){
      this.refs.toast.show("原密码错误");
      return;
    } else if(!newPwd){
      this.refs.toast.show("请输入新密码");
      return;
    } else if(newPwd.length < 6){
      this.refs.toast.show("新密码长度不得少于6位");
      return;
    } else if(!confPwd){
      this.refs.toast.show("请确认新密码");
      return;
    } else if(newPwd != confPwd){
      this.refs.toast.show("两次输入的密码不一致");
      return;
    } else {
      this._changePwd(newPwd);
    } 
  }
  _changePwd(password){
    let {userInfo} = this.state;
    fetch(BASEURL+'per/saveUserInfo?userId='+userInfo.userId+'&password='+password)
    .then(res => res.json())
    .then(result => {
      console.log('res',result);
      if(result.succ == '1'){
        userInfo.password = password;
        DeviceStorage.save('user',JSON.stringify(userInfo));
        this.refs.toast.show("修改成功");
        setTimeout(()=>{
          this.props.navigation.goBack(); 
        },1500)
      }
    })
  }
  render(){
    return(
      <View style={styles.container}>
        <InputView title='原密码' placeholder='请输入原密码' change={(val)=>this._textChange(val,1)}/>
        <InputView title='新密码' placeholder='请输入新密码' change={(val)=>this._textChange(val,2)}/>
        <InputView title='确认新密码' placeholder='请确认新密码' change={(val)=>this._textChange(val,3)}/>
        <MyButton btnStyle={{marginTop:60,}}  text='确 定' press={()=>{this._save()}}/>
        <Toast ref="toast" position='bottom' positionValue={200} />
      </View>
    )
  }
}
class InputView extends Component{
  render(){
    return(
      <View style={styles.inputView}>
          <Text style={styles.nameText}>{this.props.title}</Text>
          <TextInput 
            ref={this.props._ref}
            placeholder={this.props.placeholder}
            style={styles.searchInput}
            underlineColorAndroid="transparent"
            onChangeText={this.props.change}
            returnKeyType='done'
            placeholderTextColor='#bbb'
            secureTextEntry={true}
          />
          {/* <TouchableOpacity onPress={()=>{this.setState({nickName:''})}}>
            <Image style={styles.closeStyle} source={require('../../images/mine/icon_close.png')} />
          </TouchableOpacity> */}
        </View>
    )
  }
}
const styles = StyleSheet.create({
  closeStyle:{
    width:16,
    height:16,
  },
  tipText:{
    paddingTop:10,
    paddingBottom:10,
    paddingLeft:15,
    color:'#999'
  },
  nameText:{
    fontSize:16,
  },
  container: {
    backgroundColor:'#eee',
    flex: 1,
  },
  searchInput:{
    marginLeft:15,
    padding:0,
    flex:1,
    height: 46, 
    fontSize:15,
  },
  inputView:{
    marginTop:10,
    flexDirection:'row',
    alignItems:'center',
    paddingLeft:15,
    paddingRight:15,
    backgroundColor:'white',
    //borderWidth:1,
    //borderColor:'white',
  },

})